<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <h1 class="title">Relatórios</h1>
            <div class="row">
                <div class="twelve columns">
                    <h:form>
                        <div class="container_24 clearfix ">

                            <div class="grid_23"  style="margin: 15px auto;" >
                                <p:donutChart title="Despesas por Categoria" showDataLabels="true" 
                                              styleClass="grid_23" legendCols="2" style="margin-left: 60px;"
                                              value="#{managerChartReport.incomeDebt}" legendPosition="w"/>
                            </div>

                            <div class="grid_23">  

                                <p:lineChart id="grfLinear" title="Quantidade de Procedimentos por Mês" legendPosition="e"  
                                             value="#{managerChartReport.linearProcedureDate}"  animate="true" 
                                             styleClass="grid_23" style="width: 100%;" minY="0" minX="0" 
                                             maxY="#{managerChartReport.max}"
                                             xaxisLabel="Meses" yaxisLabel="Quantidade"/>
                            </div>
                            <div class="grid_23">  

                                <p:lineChart id="grfLinearValue" title="Valor Total de Procedimentos por Mês" legendPosition="e"  
                                             value="#{managerChartReport.linearProcedureDateValue}"  animate="true" 
                                             styleClass="grid_23" style="width: 100%;" minY="0" minX="0" 
                                             maxY="#{managerChartReport.maxValue}"
                                             xaxisLabel="Meses" yaxisLabel="Quantidade"/>
                            </div>
                        </div>
                    </h:form>
                </div>
            </div>

        </ui:define>
    </ui:composition>
</html>
